import React, { Component } from 'react';
import {Card, Row, Col, Modal}  from 'antd';
import './ui.less';

class gallery extends Component {
    state = {
        visible: false
    }
    onOpenGellery = (img) => {
        this.setState({
            visible: true,
            currentImg: img
        })
    }
    render() {
        const imgs = [
            ['1.png', '2.png', '3.png', '4.png', '5.png'],
            ['6.png', '7.png', '8.png', '9.png', '10.png'],
            ['11.png', '12.png', '13.png', '14.png', '15.png'],
            ['16.png', '17.png', '18.png', '19.png', '20.png'],
            ['21.png', '22.png', '23.png', '24.png', '25.png']
        ]
        let reactid = 0;
        const imgList = imgs.map((list, i) => list.map((item, ii) => 
            <Card style={{marginBottom: 10}} 
                cover={<img src={'/assets/img/gallery/'+ item} onClick = {() => this.onOpenGellery(item)} alt=""/>}
                key={reactid++}
            >
                <Card.Meta 
                    title="React Manage"
                    description = "Manager System"/>
            </Card>
        ))
        return (
            <div>
                <Row>
                    <Col span={5}>{imgList[0]}</Col>
                    <Col span={5}>{imgList[1]}</Col>
                    <Col span={5}>{imgList[2]}</Col>
                    <Col span={5}>{imgList[3]}</Col>
                    <Col span={4}>{imgList[4]}</Col>
                </Row>
                <Modal
                    title="图片画廊"
                    width = {300}
                    height = {500}
                    visible={this.state.visible}
                    onCancel = {() => {
                        this.setState({
                            visible: false
                        })
                    }}
                    footer = {null}>
                    <img src={'/assets/img/gallery/' + this.state.currentImg} style={{width:'100%'}} alt=""/>
                </Modal>
            </div>
        );
    }
}

export default gallery;